// 导入全局样式
import "./style.css";

// Kokomi.js 工具：移动端 DOM 适配
import { adaptMobileDOM } from "kokomi.js";

// 导入 Experience 核心类
import Experience from "./Experience/Experience";

/**
 * 初始化 DOM 结构
 * #sketch - Three.js 渲染容器
 * .loader-screen - 加载动画屏幕
 */
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
<div id="sketch"></div>
<div class="loader-screen">
    <div class="loading-canvas-container"></div>
    <div class="loading-percentage">0%</div>
</div>
`;

// 获取应用容器元素
const app = document.querySelector("#app")! as HTMLElement;

// 移动端适配：调整 DOM 元素尺寸
adaptMobileDOM(app);

// 监听窗口大小变化，重新适配
window.addEventListener("resize", () => {
  adaptMobileDOM(app);
});

// 创建 Experience 实例，启动应用
new Experience("#sketch");
